<template>
  <div>
    <div class="head">
      <div class="top" id="head">
        <div class="top_left">
          <router-link to="/"><img src="../assets/image/logo.png" alt=""></router-link>
        </div>
        <div class="top_mid">
          <ul>
            <li><router-link to="/"> 失物招领 </router-link></li>
            <li><router-link to="/lost"> 寻物启事 </router-link></li>
            <li><router-link to="/post"> 发布启事 </router-link></li>
            <li><router-link to="/about"> 帮助 </router-link></li>
          </ul>
        </div>
        <div class="top_right">
          <el-input v-model="keyWord" prefix-icon="el-icon-search" clearable placeholder="输入标题关键字进行搜索……"></el-input>
          <el-button type="success" @click="search">搜索</el-button>
        </div>
        <div class="add">
         <router-link to="/menu"> <i class="el-icon-s-operation menuBtn"></i></router-link>
<!--          <div class="menu" id="menu" @click="hideMenu">-->
<!--            <ul class="mneuUl">-->
<!--              <li><router-link to="/"> 失物招领 </router-link></li>-->
<!--              <li><router-link to="/lost"> 寻物启事 </router-link></li>-->
<!--              <li><router-link to="/post"> 发布启事 </router-link></li>-->
<!--              <li><router-link to="/about"> 帮助 </router-link></li>-->
<!--            </ul>-->
<!--          </div>-->
        </div>
      </div>
    </div>
    </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      // logoUrl: require('../assets/image/icp.png'),
      //关键字
      keyWord: "",
      h:0,
      flag: true
    }
  },
  methods:{
    //点击按钮搜索事件
    search(){
      if(this.keyWord === ""){
        this.$message.warning("搜索内容不能为空！");
      }else {
        this.$router.push({path:'/SearchResult',query: {keyWord:this.keyWord}})
      }
    },
  }
}
</script>

<style scoped>
/*.head {*/
/*  width: 100%;*/
/*  display: flex;*/
/*  justify-content: space-around;*/
/*  align-items: center;*/
/*  position: fixed;*/
/*  z-index: 99;*/
/*  background-image: url("../assets/image/bg.jpg");*/
/*}*/

/*.logo img{*/
/*  width: 20rem;*/
/*}*/

/*.head button{*/
/*  height: 40px;*/
/*  border-radius: 0;*/
/*}*/


/*#nav {*/
/*  width: 40%;*/
/*  text-align: center;*/
/*  display: flex;*/
/*  justify-content: space-around;*/
/*}*/

/*#nav a {*/
/*  color: white;*/
/*  font-size: 1.2rem;*/
/*  transition: 1s;*/
/*  font-weight: bolder;*/
/*  text-decoration: none;*/
/*  padding: 10px;*/
/*}*/

/*#nav a:hover {*/
/*  color: #42b983;*/
/*}*/

/*#nav a.router-link-exact-active {*/
/*  background-color: white;*/
/*  color: #42b983;*/
/*}*/

/*.search{*/
/*  display: flex;*/
/*}*/

/*.el-divider{*/
/*  margin: 0;*/
/*}*/
/*@media (max-width: 1000px) {*/
/*  .head{*/
/*    flex-direction: column;*/
/*  }*/
/*  #nav{*/
/*    width: 100%;*/
/*  }*/
/*  #nav a{*/
/*    font-size: 1rem;*/
/*  }*/
/*  .search{*/
/*    width: 100%;*/
/*  }*/
/*}*/
/*@media (max-width: 600px) {*/
/*  img{*/
/*    max-width: 100%;*/
/*    height: 100%;*/
/*  }*/
/*}*/
/*!*移动端适配*!*/
/*@media (max-width: 540px) {*/
/*  html {*/
/*    font-size: 84.375px;*/
/*  }*/
/*}*/

/*!*Android常用宽度*!*/
/*@media (max-width: 480px) {*/
/*  html {*/
/*    font-size: 75px;*/
/*  }*/
/*}*/

/*!*Android常用宽度*!*/
/*@media (max-width: 414px) {*/
/*  html {*/
/*    font-size: 64.69px;*/
/*  }*/
/*}*/

/*!*i6Plus,i7Plus宽度*!*/
/*@media (max-width: 375px) {*/
/*  html {*/
/*    font-size: 58.59px;*/
/*  }*/
/*}*/

/*!*i6,i7宽度*!*/
/*@media (max-width: 360px) {*/
/*  html {*/
/*    font-size: 56.25px;*/
/*  }*/
/*}*/

/*!*Android常用宽度*!*/
/*@media (max-width: 320px) {*/
/*  html {*/
/*    font-size: 50px;*/
/*  }*/
/*}*/
/*!*i5宽度*!*/

.head{
  /*background-image: url("../assets/image/bg.jpg");*/
  background-color: white;
  box-shadow: 0 0 5px 5px #ccc;
  position: fixed;
  width: 100%;
}
.top{
  width: 60%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  line-height: 60px;
}
.top .top_left{
  padding: 0;
  flex: 2;
}
.top .top_left img{
  height: 60px;
  vertical-align: middle;
}
.top .top_mid{
  flex: 5;
}
.top .add{
  font-size: 2.5rem;
  display: none;
}
.top .add a{
  color: black;
}

/*.top .add .menu li{*/
/*  background-color: #cccccc;*/
/*  margin: 5px 0;*/
/*}*/

/*导航栏超链接样式*/
.top ul{
  margin: 0;
  padding: 0;
}
.top .top_mid ul li{
  display: inline-block;
}

.top .top_mid a {
  color: #cccccc;
  font-size: 1.2rem;
  transition: 1s;
  font-weight: bolder;
  text-decoration: none;
  padding: 10px;
}

.top .top_mid a:hover {
  color: #67C23A;
}

.top .top_mid a.router-link-exact-active {
  background-color: white;
  color: #67C23A;
  border-bottom: 5px solid #67C23A;
}
/*搜索框*/
.top .top_right{
  display: flex;
  align-items: center;
  flex: 4;
}
.top .top_right button{
  vertical-align: middle;
  height: 40px;
}

/* pc */
@media screen and (min-width:960px) {
  .top{
    min-width: 960px;
  }
}
/* pad */
@media  screen and (max-width: 960px) and (min-width: 750px) {
  .top_left,.top_mid{
    display: none;
  }
  .top .add{
    display: inline-block;
  }
}
/* phone */
@media screen and (max-width:750px) {
  .top{
    width: 90%;
  }
  .top_left,.top_mid{
    display: none;
  }
  .top .add{
    display: inline-block;
  }
}
</style>
